<template>
  <div>
    <el-button type="primary" @click="showDialog">{{btnText}}</el-button>

    <el-dialog
      :visible.sync="dialog"
      append-to-body
      :title="isEdit ? '编辑地址' : '新增地址'"
    >
      <div>
        <el-form
          :model="currentForm"
          label-width="100px"
          :rules="rules"
          ref="form"
        >
          <el-form-item prop="receiveName" label="收货人">
            <el-input v-model="currentForm.receiveName"></el-input>
          </el-form-item>
          <el-form-item prop="phone" label="联系方式">
            <el-input v-model="currentForm.phone"></el-input>
          </el-form-item>
          <el-form-item prop="zipCode" label="邮编">
            <el-input v-model="currentForm.zipCode"></el-input>
          </el-form-item>
          <el-form-item prop="city" label="城市">
            <el-input v-model="currentForm.city"></el-input>
          </el-form-item>
          <el-form-item prop="address" label="详细地址">
            <el-input v-model="currentForm.address" type="textarea"></el-input>
          </el-form-item>
          <el-form-item prop="isDefault" label="默认地址">
            <el-switch v-model="currentForm.isDefault"></el-switch>
          </el-form-item>
          <el-form-item prop="" label="">
            <el-button type="primary" @click="submitForm">确认</el-button>
            <el-button @click="dialog = false;">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {deepCopy} from "@/utils";
import {saveUserAddress} from "@/api/userAddress";

export default {
  name: 'AddAddressDialog',
  props: {
    btnText: {
      type: String, default: '新增地址'
    },
    data: {
      type: [Object, Boolean],
      required: true,
    },
  },
  data(){
    return {
      dialog: false,
      currentForm: {
        id: '',
        receiveName: '',
        phone: '',
        zipCode: '',
        city: '',
        address: '',
        isDefault: false,
      },
      rules: {
        receiveName: [{ required: true, message: '请填写收货人', trigger: 'blur' }],
        phone: [{ required: true, message: '请填写联系方式', trigger: 'blur' }],
        zipCode: [{ required: true, message: '请填写邮编', trigger: 'blur' }],
        city: [{ required: true, message: '请填写城市', trigger: 'blur' }],
        address: [{ required: true, message: '请填写详细地址', trigger: 'blur' }],
      },
    }
  },
  computed: {
    isEdit(){
      return this.data !== false;
    }
  },
  methods: {
    showDialog(){
      this.dialog = true;
      if(this.data){
        this.currentForm = deepCopy(this.data)
      }else{
        this.currentForm = {
          id: '',
          receiveName: '',
          phone: '',
          zipCode: '',
          city: '',
          address: '',
          isDefault: false,
        }
      }
    },
    submitForm(){
      this.$refs.form.validate((valid) => {
        console.log(valid)
        if (valid) {
          saveUserAddress(this.currentForm)
            .then(res=>{
              this.$sMsg(res.message)
              this.dialog = false;
              this.$emit('saveUserAddress', this.currentForm)
            })
        } else {
          return false;
        }
      });
    }
  }
}
</script>

<style scoped lang="scss">

</style>
